import React,{useState} from 'react'
import { Col, Row,Button, Form, Input, message  } from 'antd';
import style from './singin.module.scss'
import bgLeft from '../../assets/images/bg-left.png'
import Header from '../../components/header/Header';
import down from '../../assets/images/3.png'
import { useNavigate } from 'react-router-dom';
import api from '../../api/index'
// import { NavLink } from 'react-router-dom';
// import classnames from 'classnames'
export default function Singin() {
  const [username,setUsrname]=useState('')
  const onFinish = (values) => {
    console.log('Success:', values);
    //判断用户名可以被注册
    api.getRegister({
      username:values.username,
      password:values.password
    })
    .then(res=>{
      console.log(res.data);
      if(res.data.success){
        navigate('/login')
      }
    })
  };
  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };
  const navigate = useNavigate()
  // 定义函数
  function tiao(){
      navigate('/login')
  }
  function blur(){
    console.log('ddasd');
    console.log(username);
    api.getVerRegist({
      username
    })
    .then(res=>{
      console.log(res.data);
      if(!res.data.msg){
        message.error('账号已存在，请重新输入')
      }
    })
  }
  return (
    <div className={style.bg}>
      <Header title='注册'/>
      <div className={style.content}>
        <div className={style.container}>
        <Row>
          <Col span={8}>
            <img src={bgLeft} alt="" width='386'/>
          </Col>
          <Col span={16}>
            <div className={style.loginBox}>
              <div className={style.register} onClick={tiao}>
               {/* <NavLink to='/login'><span>登入</span></NavLink>  */}
               <span>登入</span>
              </div>
              <div className={style.weixin}>
                <div className={style.cb1}>
                  <p className={style.title}>扫码注册</p>
                  <img src={down} alt="" />
                  <div className={style.bottom}> 使用阿里云APP/支付宝/钉钉/ <br />下载阿里云App,上云更轻松
                  </div>
                </div>
              </div>
            <div className={style.login}>
            <Form
                    name="basic"
                    labelCol={{
                      span: 4,
                    }}
                    wrapperCol={{
                      span: 20,
                    }}
                    initialValues={{
                      remember: true,
                    }}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                    autoComplete="off"
                  >
                    <Form.Item
                      label="账号"
                      name="username"
                      rules={[
                        {
                          required: true,
                          message: ' 请输入账号!',
                        },
                      ]}
                      hasFeedback
                    >
                      <Input onBlur={blur}  value={username} onChange={(e)=>setUsrname(e.target.value)

}/>
                    </Form.Item>

                    <Form.Item
                      label="密码"
                      name="password"
                      rules={[
                        {
                          required: true,
                          message: '请输入密码 ',
                        },
                      ]}
                      hasFeedback
                    >
                      <Input.Password />
                    </Form.Item>

                  

                    <Form.Item
                      wrapperCol={{
                        offset: 4,
                        span: 20,
                      }}
                    >
                      <Button type="primary" htmlType="submit" block>
                        注册
                      </Button>
                    </Form.Item>
            </Form>
            </div>
            </div>
          </Col>
          
        </Row>
        </div>
      </div>
     <div className={style.footer}>
      nh
     </div>
    </div>
  )
}
